<template>
  <el-card class="box-card" v-loading="changeLoading" element-loading-text="加载中">
    <MainGoBack name="关系列表"></MainGoBack>
    <div class="supplier-detail">
      <div class="supplier-detail-item">
        <p class="sdi-title">
          <span></span>
          <em>学校信息</em>
        </p>
        <el-form ref="bannerFormRef" :inline="true" class="news-form" :model="userForm" label-position="right" :rules="userRules" hide-required-asterisk :disabled="[1, 2].includes(pageControls)" label-width="100px">
          <el-form-item label="学校名称：" prop="name">
            <el-select
              v-model="userForm.name"
              filterable
              @change="changeUserName"
              placeholder="请选择学校名称">
              <el-option
                v-for="item in userOptions"
                :key="item.id"
                :label="item.nickname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话：" prop="mobile">
            <el-input v-model="userForm.mobile" placeholder="请输入电话" disabled></el-input>
          </el-form-item>
        </el-form>
        <p class="sdi-title">
          <span></span>
          <em>供应商信息</em>
        </p>
      </div>
    </div>
    <el-button size="mini" type="primary" @click="addSupplier" v-if="[0, 2].includes(pageControls)">添加供应商</el-button>
    <div class="main_table mg-t-20">
      <MainTable
        ref="orderTable"
        :loading="listLoading"
        :columns="columns"
        :tableData="tableData"
      >
        <el-table-column label="操作" width="160" v-if="[0, 2].includes(pageControls)">
          <template slot-scope="scope">
            <MainLink title="删除" color="#FF5566" @linkClick="deleteTable(scope.row)"></MainLink>
          </template>
        </el-table-column>
      </MainTable>
    </div>
    <addSupplierDialog
      ref="addSupplierRef"
      :show="supplierVisible"
      @close="closeSupplier"
      @handleSubmit="handleSubmit" 
      :disabledList="tableData"
    ></addSupplierDialog>
    <div class="detatil-btn" v-if="[0, 2].includes(pageControls)">
      <el-button class="reset" type="primary" @click="toExamine">保存</el-button>
      <el-button class="add-btn" @click="cancel">取消</el-button>
    </div>
  </el-card>
</template>
<script>
import addSupplierDialog from './addSupplier.vue'
import { getSupplierUser, changeRelationModify, getSupplierInfo } from '@/api/relation'
export default {
  name: "RelationDetail",
  components: { addSupplierDialog },
  data() {
    return {
      listLoading: false,
      columns: [
        { label: '合同号', prop: 'contract_no' },
        { label: '供应商名称', prop: 'name' },
        // { label: '经营类目', prop: 'leimu' },
        // { label: '标签', prop: 'bq' },
        { label: '联系人', prop: 'contacts' }, 
        { label: '电话', prop: 'mobile' },
      ],
      tableData: [],
      pageControls: null,
      supplierVisible: false,
      userOptions: [],
      loading: false,
      userForm: {
        name: '',
        mobile: '',
      },
      userRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ]
      },
      titleList: ['新增关系', '查看关系', '编辑关系'],
      changeLoading: false
    }
  },
  methods: {
    remoteMethod() {},
    toExamine() {
      if(!this.userForm.name) return this.$message.error('请选择学校名称')
      if(!this.tableData.length && [0, 1].includes(this.pageControls)) return this.$message.error('请添加供应商')
      const data = {
        user_id: this.userForm.name,
        supplier_ids: this.tableData.map(el => el.company_id).join(',')
      }
      changeRelationModify(data).then(res => {
        if(res.errcode == 0) {
          this.$message.success('保存成功');
          setTimeout(() => {
            this.$router.back(-1)
          }, 1500)
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    cancel() {
      this.$router.back(-1)
    },
    addSupplier() {
      this.supplierVisible = true
      this.$nextTick(() => {
        this.$refs.addSupplierRef.getData()
      })
    },
    closeSupplier() {
      this.supplierVisible = false
    },
    handleSubmit(list) {
      this.tableData = this.tableData.concat(list)
    },
    deleteTable(row) {
      let indexToRemove = this.tableData.indexOf(row);
      // 使用splice()方法来删除
      // 第一个参数是开始删除的位置，第二个参数是删除元素的个数
      this.tableData.splice(indexToRemove, 1);
    },
    changeUserName(val) {
      this.userForm.mobile = this.userOptions.filter(el => el.id === val)[0].mobile
    },
    //  获取用户列表
    getUserList() {
      getSupplierUser({ need_page: 0 }).then(res => {
        if(res.errcode == 0) {
          this.userOptions = res.data.list
        }
      })
    }
  },
  created() {
    this.pageControls = +this.$route.query.pageControls
    this.$route.meta.title = this.titleList[this.pageControls]
    this.getUserList()
    if(this.$route.query.id) {
      this.changeLoading = true
      getSupplierInfo({ user_id: this.$route.query.id }).then(res => {
        if(res.errcode == 0) {
          this.changeLoading = false
          this.$nextTick(() => {
            this.userForm.name = +res.data.user_id
            this.userForm.mobile = res.data.mobile
            this.tableData = res.data.supplier
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../index.scss';
@import './detail.scss';
</style>